<template>
	<view class="content">
		<navBack />
		<image src="/static/bg.png" mode="" class="box-bg"></image>
		<view class="card">
			<view class="_title_" style="margin-bottom: 12rpx;">
				维修项目
			</view>

			<view class="vote-state">
				进行中
			</view>

			<view class="lable" v-for="item in 4">
				<view class="">
					房产
				</view>
				<view class="">
					赛罕区成吉思汗大街128号
				</view>
			</view>
		</view>

		<view class="card">
			<view class="_title_">
				投票
			</view>
			<view class="title-btn" @click="alterVoteState=!alterVoteState">
				修改
			</view>


			<view class="vote-explain">
				截止2023-12-31 投票结果以点击同意/不同意按钮为准!
			</view>

			<view class="vote_box" v-if="!alterVoteState">
				<u--textarea v-model="value" placeholder="请输入投票意见" count></u--textarea>

				<view class="btn-box">
					<view class="item" :class="{'item_active':voteState==1,'item_death':voteState==2}">
						<image src="/static/vote_yes.png" mode=""></image>
						<view @click="setVoteState(1)">
							同意
						</view>
					</view>
					<view class="item" :class="{'item_active':voteState==2,'item_death':voteState==1}">
						<image src="/static/vote_no.png" mode=""></image>
						<view @click="setVoteState(2)">
							不同意
						</view>
					</view>
				</view>
			</view>


			<view class="vote_box" v-else>
				<view class="vote-statistics">
					<view class="" v-for="(item ,index) in 3" style="height: 282rpx;">
						<view class="vote-statistics-item" :class="'vote-statistics-item'+index">
							<view class="">
								投票人数
							</view>
							<view class="">
								1000人
							</view>
						</view>

						<view class="vote-statistics-item" :class="'vote-statistics-item'+index">
							<view class="">
								投票人数
							</view>
							<view class="">
								1000人
							</view>
						</view>
					</view>
				</view>

				<view class="statistics">
					同意比例：人数比76% 面积比81%
				</view>

				<view class="statistics-explain">
					投票结果：投票人数和面积均大于法律规定的2/3比例，因此将遵循业主意愿，同意维修！
				</view>
			</view>
		</view>



		<view class="card">
			<view class="_title_">
				我的分摊详情
			</view>
			<view class="vote-statistics">
				<view class="" v-for="(item ,index) in 3">
					<view class="vote-statistics-item" :class="'vote-statistics-item'+index">
						<view class="">
							投票人数
						</view>
						<view class="">
							1000人
						</view>
					</view>
				</view>
			</view>

			<view class="_title">
				小区监控维修
			</view>
			<view class="lable" v-for="item in 4">
				<view class="">
					房产
				</view>
				<view class="">
					赛罕区成吉思汗大街128号
				</view>
			</view>
			<view class="_title">
				小区监控维修
			</view>
			<view class="lable" v-for="item in 4">
				<view class="">
					房产
				</view>
				<view class="">
					赛罕区成吉思汗大街128号
				</view>
			</view>

		</view>


		<u-popup :show="voteVerifyShow" @close="close" @open="open" round="22rpx">
			<view class="popup">
				<view class="popup_title">
					投票结果确认
				</view>
				<view class="popup_hint">
					请核查该项目投票结果,并再次确认！
				</view>

				<view class="popup_value">
					{{voteState==1?'同意':'不同意'}}
				</view>

				<view class="popup_btn" @click="voteSubmit">
					确认
				</view>
			</view>
		</u-popup>
		<Loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alterVoteState: false,
				value: '',
				voteState: 0, //1同意 2反对
				voteVerifyShow: false
			}
		},
		methods: {
			setVoteState(value) {
				this.voteState = value
				this.voteVerifyShow = true
			},
			close() {
				this.voteVerifyShow = false
				this.voteState = 0
			},
			voteSubmit() {
				// this.$myRequest(`/api/houses/GetHouseInProjectProcess/${e.id}`).then(res => {
				// 	this.houseData = res
				// })
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f5f5f5;
		padding: 172rpx 20rpx 28rpx 20rpx;
		min-height: calc(100vh - 200rpx);

		.popup {
			padding: 40rpx 20rpx;
			height: 480rpx;

			.popup_title {
				font-size: 32rpx;
				font-weight: 700;
				text-align: center;
			}

			.popup_hint {
				font-size: 28rpx;
				color: #333333;
				margin: 20rpx 0;
				text-align: center;
			}

			.popup_value {
				font-size: 42rpx;
				font-weight: 700;
				text-align: center;
				color: #FF4A4A;
				// animation: showValue 2.2s;
				width: 300rpx;
				position: fixed;
				left: 50%;
				bottom: 300rpx;
				transform: translateX(-50%);
			}

			// @keyframes showValue {
			// 	0%{
			// 		bottom: 40%;
			// 		font-size: 0;
			// 		opacity: .4;

			// 	}
			// 	40%{
			// 		bottom: 56%;
			// 		font-size: 68rpx;
			// 		opacity: 1;
			// 	}
			// 	70%{
			// 		bottom: 56%;
			// 		font-size: 42rpx;
			// 		opacity: 1;
			// 	}		
			// 	100%{
			// 		bottom:300rpx;
			// 		font-size: 42rpx;
			// 		opacity: 1;
			// 	}
			// }

			.popup_btn {
				width: 380rpx;
				height: 74rpx;
				background: #FF4A4A;
				color: #ffffff;
				border-radius: 12rpx;
				margin: 20rpx auto;
				margin-top: 240rpx;
				line-height: 64rpx;
				text-align: center;
			}
		}

		.card {
			padding: 24rpx 20rpx;

			._title {
				font-size: 28rpx;
				color: #456FFD;
				font-weight: 700;
				position: relative;
				padding: 0 18rpx;
				margin-top: 54rpx;

				&::after {
					content: '';
					width: 10rpx;
					height: 10rpx;
					background-color: #456FFD;
					border-radius: 50%;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}

			.vote_box {
				animation: showAn 1s;
			}

			@keyframes showAn {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}


			.btn-box {
				width: 510rpx;
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				margin-top: 38rpx;

				.item {
					position: relative;
					width: 255rpx;
					height: 64rpx;
					border-radius: 32rpx;
					transition: width .8s ease-out, background .5s ease-out;

					image {
						width: 100%;
						height: 100%;
						opacity: 1;
						transition: opacity .6s ease-out .2s;
					}

					view {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 64rpx;
						text-align: center;
						opacity: 1;
						transform: scale(1);
						transition: opacity .4s, transform .4s;
					}
				}

				.item_active {
					width: 510rpx;
					background: #FF4A4A;
					position: relative;
					z-index: 99999999;

					image {
						opacity: 0;
					}

				}

				.item_death {
					width: 0;

					image {
						opacity: 0;
					}

					view {
						transform: scale(0);
						opacity: 0;
					}
				}
			}

			.vote-state {
				font-size: 28rpx;
				font-weight: 700;
				color: #ff0000;
				position: absolute;
				top: 24rpx;
				right: 20rpx;
			}

			.vote-statistics {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				>view {
					width: 194rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.vote-statistics-item {
						padding: 10rpx 0;
						text-align: center;
						width: 194rpx;
						height: 106rpx;
						border-radius: 8rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						>view:nth-child(2) {
							font-weight: 700;
						}
					}

					.vote-statistics-item0 {
						color: #2F75F1;
						background-color: rgba(47, 117, 241, .2);
					}

					.vote-statistics-item1 {
						color: #FE7E14;
						background-color: rgba(254, 126, 20, .2);
					}

					.vote-statistics-item2 {
						color: #FEA90E;
						background-color: rgba(254, 169, 14, .2);
					}
				}
			}

			.statistics {
				background-color: rgba(255, 48, 48, .2);
				color: #FF3030;
				border-radius: 8rpx;
				text-align: center;
				height: 72rpx;
				line-height: 72rpx;
				font-size: 28rpx;
				margin: 34rpx 0;
			}

			.statistics-explain {
				color: #FF3030;
				font-weight: 700;
				font-size: 28rpx;
			}

			.title-btn {
				width: 170rpx;
				height: 52rpx;
				background-color: #456FFD;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 52rpx;
				text-align: center;
				border-radius: 52rpx;
				position: absolute;
				top: 22rpx;
				right: 20rpx;
			}

			.vote-explain {
				color: #FF3030;
				background-color: rgba(255, 48, 48, .13);
				height: 52rpx;
				line-height: 52rpx;
				font-size: 24rpx;
				text-align: center;
				border-radius: 8rpx;
				margin: 30rpx 0;
			}
		}
	}
</style>